<template>
    <el-row class="box box-tb box-pack-start height100 main">
        <!-- <div class="select box box-align-center box-pack-start mb10">
             <span class="mr10">学期</span>
             <el-select v-model="xqValue" placeholder="选择学期" @change="getQdList" class="text">
                 <el-option v-for="(item,index) in xqList" :key="index" :label="item.xn +`-`+item.xq"
                     :value="item.xn +`-`+item.xq"></el-option>
             </el-select>
         </div>
 -->
        <el-col class="box box-pack-between" style="height: calc(100% - 50px);">
            <el-col :span="15" class="box box-tb">
                <el-col class="box box-pack-between">
                    <span> 实践清单 共{{sjData.length}}项</span>
                </el-col>
                <el-col class="pub" style="overflow-y: auto;" v-if="sjData.length !=0">
                    <div class="list box box-pack-between mt10" v-for="(item,index) in sjData" :key="index">
                        <div class="left box box-tb box-align-start mt10">
                            <span class="icon" v-if="item.type==`0`">服务劳动</span>
                            <span class="icon" v-if="item.type==`1`">日常生产劳动</span>
                            <span class="icon" v-if="item.type==`2`">生活劳动</span>
                            <div class="box">
                                <el-image class="img" fit="cover" :src="item.img">
                                </el-image>
                                <div class="box box-tb box-align-start box-pack-between ml10">
                                    <h3>{{item.title}}</h3>
                                    <!-- <span class="end-time">
                                        截止时间 2022-4-11 11:54:04 - 2022-4-11 11:54:27
                                    </span> -->
                                </div>
                            </div>
                        </div>
                        <div class="right box box-tb box-pack-between">
                            <div class="box box-pack-center box-align-center">
                                <el-avatar :size="34" :src="item.icon">
                                </el-avatar>
                                <span class="ml10">{{item.createUser}}</span>
                            </div>
                            <el-button type="warning" icon="el-icon-plus" round size="small"
                                :disabled="item.isadd == 1?true:false" @click="addQd(item.id,activeList[index].pubToStu)">添加</el-button>
                            <el-switch v-model="activeList[index].pubToStu" :active-value="1" :inactive-value="0" active-text="同步到学生" inactive-text="" @change="change">
                            </el-switch>
                        </div>
                    </div>
                </el-col>
                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无实践清单" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>
            </el-col>
            <el-col class="pub padd10" :span="8" style="overflow-y: auto;">
                <el-col class="box box-align-center box-pack-between">
                    <div>
                        <i class="icon-1"></i>
                        实践任务
                    </div>
                    <span>已发布</span>
                </el-col>
                <el-col class="mt30">
                    <el-col v-if="qdList.length !=0">
                        <div class="lists padd20 box box-pack-between box-align-center mb10"
                            v-for="(item,index) in qdList" :key="index">
                            <span class="icon-2" v-if="item.type==`0`">服务劳动</span>
                            <span class="icon-2" v-if="item.type==`1`">日常生产劳动</span>
                            <span class="icon-2" v-if="item.type==`2`">生活劳动</span>
                            <div class="box box-align-center" style="width: 65%;box-sizing: border-box;">
                                <el-image class="img" style="width: 80px;height: 60px;min-width: 80px;" fit="cover"
                                    :src="item.img">
                                </el-image>
                                <div class="ml20 box box-tb box-align-start" style="width: 100%;">
                                    <h3 class="mb10 tl" :title="item.title">{{item.title}}</h3>
                                    <span>视频：{{item.videoid !=null?1:0}}</span>
                                </div>
                            </div>

                            <el-button type="danger" size="mini" round @click="deleteQd(item.id)"
                                :disabled="item.isrecord == 1?true:false">移除</el-button>
                        </div>
                    </el-col>
                    <el-col v-else>
                        暂无数据
                    </el-col>

                </el-col>
            </el-col>
        </el-col>
    </el-row>

</template>

<script>
    export default {
        props: {
            sjData: {
                type: Array
            }
        },
        data() {
            return {
                loginInfo: this.$store.state.loginInfo,
                qdList: [],
                tkzt: false,
                xqList: [],
                xqValue: '',
                value: 0,
                activeList:[]
            };
        },
        mounted() {},
        watch:{
            sjData:function(newVal,old){
                console.log(newVal,old);
                newVal.forEach(res=>{
                    this.activeList.push({pubToStu:1})
                })
            }
        },
        methods: {
            change(e) {
                console.log(e);
                 // this.$forceUpdate()
            },

            //查询清单

            addQd(id,pubToStu) {
                let url = '/ysjlist/add';
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    ldsjids: id,
                    pubToStu:pubToStu
                };
                console.log(id,pubToStu);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.getQdList()
                        this.$message.success('添加成功')
                        this.$emit('update')
                    }
					if(res.code == 10012){
						this.$message.error(res.msg)
					}
                })
            },
            deleteQd(id) {
                let url = '/ysjlist/del';
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    ldsjid: id
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.getQdList()
                        this.$message.success('已移除')
                        this.$emit('update')
                    } else {
                        this.$message.error(res.msg)
                    }

                })
            },
            getXqData() {
                let url = "/comm/getXnxqList";
                let params = {
                    schoolid: this.schoolid
            	   };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.xqList = res.xnxqList;
                        let a = res.xnxqList.map(resp => {
                            if (resp.isCur == 1) return resp
                        })
                        a.forEach(r => {
                            if (r != undefined) {
                                this.xqValue = r.xn + '-' + r.xq
                            }
                        })
                        this.getQdList()
                    }
                })
            },
            getQdList() {
                let url = '/ysjlist/ldqd';
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    userid: this.loginInfo.user.id,
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.qdList = res.list;
                    } else {
                        this.$message.error(res);
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .main {
        padding: 20px;
        background-color: #fff;
    }

    .pub::-webkit-scrollbar {
        width: 0px;
    }

    .no-auto::-webkit-scrollbar {
        width: 0px;
    }

    .list {
        position: relative;
        padding: 20px;
        height: 113px;
        background: #fff;
        border: 1px solid #E0DEF6;
        border-radius: 7px;

        .icon {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 0px 0px 0px;
        }

        h3 {
            font-size: 18px;
        }
    }

    .lists {
        box-sizing: border-box;
        position: relative;
        background: #F8F9FC;
        border: 1px solid #ccc;
        border-radius: 6px;

        h3 {
            width: 65%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .icon-2 {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 0px 0px 0px;
        }
    }

    .pub {
        border: 1px solid #E0DEF6;
        border-radius: 12px;
    }

    .lists.active {
        color: #fff;
        background: #7686F5;
    }

    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }

    /deep/ .el-image.img {
        border-radius: 5px;
        width: 120px;
        height: 100px;
    }
</style>
